<template>
	<view>
	<!-- <view class="topbar" :style="{height:topbarheight+'rpx'}"></view> -->
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption" @emptyclick="emptyClick" >
		<!-- 		<view @tap="visible=true">兑换商城</view> -->
	
		<!--显示红包组件-->
		<view class="redbags">
			<view class="headbg"></view>
			<view class="bag-title">每天20:30限量放出</view>
			<limit-redbag ref="dayredbag" ></limit-redbag>
		</view>
		<!--me-tabs导航组件-->
		<view style="margin: 20rpx 0;">
			<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100" :tabWidth="180" nameKey="title"></me-tabs>
		</view>
		<!--商品组件-->

		<!-- 数据列表 -->
		<shop :shoplist="shoplist" ref="shop"></shop>

		<!--空商品组件-->
		<!-- 	<empty v-if="isempty"></empty> -->
		<!-- <view class="buybotton">
			<navigator url="/pages/activity/activity" class="botton-item">获取更多金币</navigator>
			<navigator url="/pages/member/order"  class="botton-item order-botton">我的订单</navigator>
		</view> -->
	</mescroll-body>
	<!--alret提示框-->
	<!-- <alert :modeltitle="modeltitle" :visible="visible">
		<view>我是一些额可敬的阿萨德 爱上我是一些额可敬的阿萨德 
		爱上我是一些额可敬的阿萨德 爱上我是一些额可敬的阿萨德
		 爱上我是一些额可敬的阿萨德 爱上我是一些额可敬的阿萨德 爱上我是一些额可敬的阿萨德 爱上
		 </view>
	</alert> -->
	</view>
</template>

<script>
	/**
	 * 兑换商城
	 * 
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				topbarheight:80,
				shoplist: [],
				modeltitle: '参与抽奖领红包',
				tabIndex: 0, // 当前菜单下标
				tabs: [],
				upOption: {
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: ''
					},
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
				},
				downOption: {
					use: false
				}
			}
		},
		onShow() {
			//刷新红包数据
			this.getdayrb();
		},
		onLoad() {
			//获取红包组件数据
			this.getdayrb();
			this.gettabbar();
				//设置topbar高端
			// if(plus.os.name == 'Android'){
			// 	this.topbarheight = 80
			// }
		},
		methods: {
			upCallback(page) {
				//获取分类小BUG不能即使获取
				let tab = this.tabs[this.tabIndex];
				let categoryid = 0; //默认全部商品ID为0
				if (tab) {
					categoryid = tab.id
				}
				this.getinitdata(page.num, categoryid).then(res => {
					// console.log(res);
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.shoplist = []; //如果是第一页需手动制空列表
					this.shoplist = this.shoplist.concat(res); //追加新数据
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg('网络连接失败！');
				})
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},


			//切换菜单
			tabChange(index) {
				this.tabIndex = index;
				this.shoplist = [];
				this.mescroll.resetUpScroll();
			},
			//获取列表数据
			getinitdata(pages, categoryid = 0) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/looting/lists',
						param: {
							page: pages,
							category: categoryid
						}
					}).then((res) => {
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					});
				});

			},
			// 获取分类导航列表
			gettabbar() {
				this.$HttRequest({
					url: '/looting/category',
					param: ''
				}).then((res) => {
					// console.log(res);
					if (res.status === 10000) {
						this.tabs = res.data;
						this.mescroll.resetUpScroll() // 再刷新列表数据
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},
			//获取每日领取红包数据
			getdayrb() {
				this.$nextTick(() => {
					this.$refs.dayredbag.getdayredbag();
				});
			},
			// initlist(){
			// 	this.$nextTick(() => {
			// 		this.$refs.shop.shoplist();
			// 	});
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}
	.topbar{
		z-index: 999;
		background-color: $uni-color-primary;
	
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
	.redbags {
		background-color: #fff;
		width: 100vw;
		margin-top: 95rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			position: relative;
			.headbg {
				position: absolute;
				top: -100rpx;
				left: 0;
				width: 100%;
				background-color: $uni-color-primary;
				height: 200rpx;
				z-index: -1;
			}
		.bag-title {
			padding: 20rpx;
			border-bottom: 1rpx solid #f0f0f0;
			margin-bottom: 30rpx;
			color: #646464;
			font-size: 25rpx;
		}
	}




	.buybotton {
		position: fixed;
		width: 100vw;
		bottom: 0;
		height: 120rpx;
		background-color: #fff;
		justify-content: space-around;
		align-items: center;
		display: flex;
		z-index: 888;
		border-top: 1rpx solid #F0F0F0;

		.botton-item {
			background-color: $uni-botton-primary;
			justify-content: center;
			align-items: center;
			display: flex;
			height: 80rpx;
			width: 320rpx;
			color: #fff;
			border-radius: 50rpx;
			font-size: 28rpx;
		}

		.order-botton {
			border: 1rpx solid #4f4f4f;
			color: #4f4f4f;
			background-color: #fff;
		}
	}
</style>
